<template>
	<view :class="mouse?'card-box shadow':'card-box'">
		<u-card class="card" :thumb="headSrc" thumb-width="60" :thumb-circle="true"
			:title="card.title" :foot-border-top="false" :head-border-bottom="true" border-radius="0" :border="true">
			<view class="body" slot="body">
				<rich-text :nodes="card.content"></rich-text>
				<u-image class="image" v-if="card.images.length!=0" :src="image" height="300" width="300"></u-image>
			</view>
			<view class="foot" slot="foot">
				<view class="time">{{card.time}}</view>
			</view>
		</u-card>
		<view class="event-box"  @click="click"></view>
	</view>
</template>

<script>
	export default {
		props: {
			card: {
				type: Object
			},
			headSrc: {
				type: String
			}
		},
		name: "my-card",
		data() {
			return {
				image: this.card.images[0],
				mouse:false
			};
		},
		methods: {
			
			click() {
				this.$emit("check", this.card)
			}
		}
	}
</script>

<style lang="scss">
	.card-box{
		position: relative;
		.event-box{
			//border: 1px red solid;
			
			position: absolute;
			height: 100%;
			width: 100%;
			left: 0rpx;
			top: 0rpx;
		}
		.card {
			.body {
				display: flex;
				flex-direction: column;
				align-items: center;
		
				.image {
					margin: 20rpx 0;
				}
			}
			.foot{
				.time{
					border-top: 2rpx $u-bg-color solid;
					width: 100%;
					text-align: end;
					margin-top: 10rpx;
					right: 10rpx;
				}
			}
		}
	}
</style>
